<template>
  <div class="myCardDiv">
    <el-steps class="crumbList" :align-center="true">
      <el-step v-for="item in monitorData" :key="item.id" :description="item.description" icon="el-icon-check" :status="item.status"></el-step>
    </el-steps>
  </div>
</template>
<script>
  export default {
    name: 'workFlowCirculationCom',
    data() {
      return {
        loading: false,
        monitorData: [],
        stepSpace: '10'
      }
    },
    props: ['procInstanceId'],
    created() {
      // this.getWfProcessCirculation()
    },
    computed: {
      //
    },
    watch: {
      procInstanceId() {
        this.getWfProcessCirculation()
      }
    },
    methods: {
      rowClick(row, event, column) {
        // 行单击事件
      },
      cellClick(row, column, cell, event) {
        // 列单击事件
      },
      rowContextmenu(row, column, e) {
        // 右键菜单
        window.event.returnValue = false
      },
      getWfProcessCirculation() {
        let args = {}
        args.procInstanceId = this.procInstanceId
        this.$store.dispatch('WfProcessMonitor', args).then(res => {
          let records = res.data
          let monitorData = []
          records.forEach((item, index) => {
            let monitorRecord = {}
            monitorRecord.id = item.actId
            monitorRecord.description = item.actName
            monitorRecord.status = 'wait'
            const actInsCurStatus = item.actInsCurStatus
            if (actInsCurStatus === '2') {
              monitorRecord.status = 'success'
            } else if (actInsCurStatus === '1') {
              monitorRecord.status = 'process'
              let auditPeopleList = item.auditPeopleList
              let auditUserStr = ''
              auditPeopleList.forEach((pitem, pindex) => {
                if (pitem.name) {
                  auditUserStr += ',' + pitem.name
                }
              })
              if (auditUserStr) {
                monitorRecord.description = item.actName + '（' + auditUserStr.substring(1) + '）'
              }
            }
            monitorData.push(monitorRecord)
          })
          this.monitorData = monitorData
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
    }
  }
</script>
<style scoped>
  .myCardDiv {
    overflow: auto;
    height: 80px
  }
  .myCardDiv >>> .el-step__description {
    margin: 0 !important;
  }
  .myCardDiv >>> .el-step__icon-inner[class*=el-icon]:not(.is-status) {
    font-weight: 700 !important;
    font-size: 13px !important;
  }
</style>
